<script setup lang="tsx">
import {ref, toRefs} from "vue";

const props = defineProps({
  hasCheckArr: {
    type: Array,
    default: () => []
  },
  abc: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['submit'])

import {type Column, ElMessageBox, ElButton, ElTag} from 'element-plus'

const dialogVisible = ref(false)

const handleClose = (done: () => void) => {
  ElMessageBox.confirm('Are you sure to close this dialog?')
      .then(() => {
        done()
      })
      .catch(() => {
        // catch error
      })
}

//table
const columns: Column<any>[] = [
  {
    key: 'id',
    title: 'id',
    dataKey: 'id',
    width: 150,
    align: 'center',
  },
  {
    key: 'name',
    title: 'Name',
    dataKey: 'name',
    width: 150,
    align: 'center',
    cellRenderer: ({ cellData: name }) => <ElTag>{name}</ElTag>,
  },
  {
    key: 'operations',
    title: 'Operations',
    cellRenderer: ({rowData}) => (
        <>
          <ElButton onClick={() => check(rowData)} size="small">
            {rowData.isCheck? '已选' : '未选'}
          </ElButton>
        </>
    ),
    width: 150,
    align: 'center',
  },
]
let id = 0
// const dataGenerator = () => ({
//   id: `random-id-${++id}`,
//   name: `Tom_${id}`,
//   isCheck: false,
// })
const selectId = ref<string[]>([])
type nData = {
  id: string,
  name: string,
  isCheck: boolean
}
const dataGenerator = () => {
  let ndata:nData[] = [];
  for (let i = 0; i < 100; i++) {
    ndata.push({
      id: `${++id}`,
      name: `Tom_${id}`,
      isCheck: props.hasCheckArr.includes(id.toString()) && Boolean(selectId.value.push(`${id}`))
    })

  }
  return ndata
}

const data = ref(dataGenerator())


const check = (row:any) => {
  // console.log(row)
  // selectId.value = row.name
  // dialogVisible.value = false
  row.isCheck = !row.isCheck
  if (row.isCheck) {
    selectId.value.push(row.id)
  }else {
    selectId.value = selectId.value.filter(item => item !== row.id.toString())
  }

}

const submit = () => {
  console.log(selectId.value)
  emit('submit', selectId)
  emit('update:abc', 'hahaha000000')
  dialogVisible.value = false
}
</script>

<template>
<div>
  <el-button plain @click="dialogVisible = true">
    Click to open the Dialog
  </el-button>
  <el-dialog
      v-model="dialogVisible"
      title="Tips"
      width="1000"
      :before-close="handleClose"
  >
    <el-table-v2
        :columns="columns"
        :data="data"
        :width="900"
        :height="400"
        fixed
    />
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="submit">
          Confirm
        </el-button>
      </div>
    </template>
  </el-dialog>
</div>
</template>

<style scoped>

</style>